<script>
import Taro from "@tarojs/taro";
import { reactive } from "vue";
import { useTzRouter } from "@/vhooks/useTzRouter";
import { receiptApi } from "./api";

export default {
  name: "ConfirmReceipt",
  components: {},
  setup() {
    const state = reactive({
      receiptList: [],
    });

    const { route } = useTzRouter();
    const { docId } = route.query;

    if (docId) {
      // receiptApi({ docId }).then((res) => {
      receiptApi(docId).then((res) => {
        state.receiptList = res.data;
      });
    }

    const matchColor = (data) => {
      if (data.operateContent.length <= 4) return;
      if (data.operateContent && data.operateContent.indexOf("成功") !== -1) {
        return "success";
      } else {
        return "fail";
      }
    };

    //返回列表
    const navigateList = (event) => {
      // 阻止冒泡
      event.stopPropagation();
      const pages = Taro.getCurrentPages();
      if (pages[pages.length - 2]) {
        //如果有上一页，就返回上一页
        Taro.navigateBack({ delta: 1 });
      } else {
        //否则就跳转到首页面
        Taro.switchTab({
          url: "/pages/home/index",
        });
      }
    };

    return () => {
      return (
        <tz-view class="confirm-receipt">
          <tz-view class="content">
            {state.receiptList.map((item) => (
              <tz-view class="cell-block">
                <tz-cell title="回执时间">{item.busiOperateTime}</tz-cell>
                <tz-cell title="报文状态">{item.operateTypeName}</tz-cell>
                <tz-cell class={["remark", matchColor(item)]} title="回执信息">
                  {item.operateContent}
                </tz-cell>
              </tz-view>
            ))}
            <tz-button type="default" onClick={(event) => navigateList(event)}>
              返回
            </tz-button>
          </tz-view>
        </tz-view>
      );
    };
  },
};
</script>

<style lang="scss">
.confirm-receipt {
  display: flex;
  align-items: center;
  flex-direction: column;
  .header {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px 20px 20px;
    border-bottom: 1px solid $border-color;
    background-color: $white;
    .tz-button {
      height: 30px;
      width: 80px;
      margin-left: 10px;
    }
  }
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: $white;
    padding-bottom: 48px;
    .cell-block {
      padding: 10px 10px 10px 20px;
      width: 100%;
      &:nth-child(even) {
        background: aliceblue;
      }
      .tz-cell {
        font-size: 14px;
        line-height: 24px;
        align-items: flex-start;
        .tz-cell-label {
          width: auto;
          padding-right: 20px;
          color: $info-color;
        }
        &.remark {
          &.success {
            .tz-cell-value {
              color: $success-color-end;
            }
          }
          &.fail {
            .tz-cell-value {
              color: $danger-color-active;
            }
          }
        }
      }
    }
    .tz-button {
      width: 345px;
      margin-top: 20px;
      height: 44px;
    }
  }
}
</style>
